<template>
  <div class="contract-box">
    <div class="add-contract-box">
      <div class="contract-head">新建合同</div>
      <div class="box-contract-info">
        <div style="width: 200px">合同基本信息</div>
        <div class="basic-info">
          <span>合同编号:</span>
          <el-input class="my_style" readonly value="系统自动生成" />
        </div>
        <div class="basic-info">
          <span>合同名称:</span>
          <el-input class="my_style" v-model="contract.contractName" />
        </div>

        <div class="basic-info">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;类型:</span>
          <el-select
            v-model="contract.contractType"
            placeholder="请选择付款方式"
            style="margin-left: 20px; border-bottom: 1px solid black"
          >
            <el-option
              v-for="dict in dict.type.bs_contract_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </div>
        <div class="basic-info">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;密级:</span>
          <el-input class="my_style" v-model="contract.privacy" />
        </div>
        <div class="time-box">
          <span>交付日期:</span>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            style="margin-left: 20px"
            v-model="contract.payTime"
          >
          </el-date-picker>
        </div>
        <div class="basic-info">
          <span>合同金额:</span>
          <el-input class="my_style" v-model="contract.totalMoney" readonly />
        </div>
        <div class="basic-info">
          <span>合同说明:</span>
          <el-input
            type="textarea"
            :rows="3"
            class="textarea-sty"
            v-model="contract.remark"
          ></el-input>
        </div>
      </div>

      <!--相关项目信息-->
      <div class="box-bind-info">
        <div style="width: 200px">相关项目信息</div>
        <div class="basic-info">
          <span>项目名称:</span>
          <el-input
            class="my_style"
            v-model="$route.query.item.bindName"
            readonly
          />
        </div>
        <div class="basic-info">
          <span>项目编号:</span>
          <el-input
            class="my_style"
            v-model="$route.query.item.bindCode"
            readonly
          />
        </div>
        <div class="basic-info">
          <span>招标方式:</span>
          <span>
            <dict-tag
              style="margin-left: 30px; display: inline-block"
              :options="dict.type.pur_methods"
              :value="$route.query.item.bindMethod"
            />
          </span>
        </div>
        <div class="basic-info">
          <span>业务类型:</span>
          <dict-tag
            style="margin-left: 30px; display: inline-block"
            :options="dict.type.business_type"
            :value="$route.query.item.busiType"
          />
        </div>
      </div>
      <!--合同清单-->
      <div class="box-product-info">
        <div style="width: 200px">合同清单</div>
        <div style="width: 1200px; margin: 20px auto">
          <el-table :data="planInfoList" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="税率" style="margin-right: 80px">
                    <span>{{ props.row.taxRate + "%" }}</span>
                  </el-form-item>
                  <el-form-item label="预算总价" style="margin-right: 80px">
                    <span>{{ props.row.bdgTotlePrice + "元" }}</span>
                  </el-form-item>
                  <el-form-item label="交付时间" style="margin-right: 80px">
                    <span>{{ props.row.delvTime }}</span>
                  </el-form-item>
                  <el-form-item label="需求说明" style="margin-right: 80px">
                    <span>{{ props.row.prodExplain }}</span>
                  </el-form-item>
                  <el-form-item label="采购人">
                    <span>{{ props.row.purchaser }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              label="预算编号"
              align="center"
              prop="bgId"
              width="200"
            />
            <el-table-column
              label="产品编号"
              align="center"
              prop="prodId"
              width="200"
            />
            <el-table-column
              label="产品名称"
              align="center"
              prop="prodName"
              width="200"
            />
            <el-table-column
              label="规格"
              align="center"
              prop="size"
              width="150"
            />
            <el-table-column
              label="预算单价"
              align="center"
              prop="bdgSinglePrice"
              width="140"
            />
            <el-table-column label="需求数量" align="center" prop="reqNumber" />
          </el-table>
          <pagination
            v-show="planInfoTotal > 0"
            :total="planInfoTotal"
            :page.sync="planInfoqueryParams.pageNum"
            :limit.sync="planInfoqueryParams.pageSize"
            @pagination="getPlanInfoList"
          />
          <div>&nbsp;</div>
        </div>
      </div>

      <div class="box-contract-info">
        <div style="width: 200px">合同履行约定</div>
        <div>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            style="margin-left: 50px; margin-top: 20px"
            v-hasPermi="['basic:agree:add']"
          >
            新增</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['basic:agree:export']"
            >导出</el-button
          >

          <el-table
            :data="agreeList"
            @selection-change="handleSelectionChange"
            style="width: 1200px; margin: 20px auto"
            border
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="款项类型" align="center" prop="paymentType">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.bs_payment_type"
                  :value="scope.row.paymentType"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="付款单位"
              align="center"
              prop="paymentUnit"
              width="200px"
            />
            <el-table-column
              label="付款方式"
              align="center"
              prop="paymentMethod"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.bs_payment_method"
                  :value="scope.row.paymentMethod"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="付款日期"
              align="center"
              prop="paymentTime"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.paymentTime, "{y}-{m}-{d}")
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="收款单位" align="center" prop="supName" />

            <el-table-column
              label="付款金额"
              align="center"
              prop="paymentMoney"
            />
            <el-table-column label="违约责任" align="center" prop="backOut" />

            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['basic:agree:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['basic:agree:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div>
            <span class="total-number">总计:{{ totalMoney + "元" }}</span>
          </div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>

      <!--相关项目信息-->
      <div class="box-contract">
        <div style="width: 200px">合同签署状态</div>
        <div class="basic-info">
          <span>&nbsp;&nbsp;签署方数:</span>
          <el-input class="my_style" readonly value="系统自动生成" />
        </div>

        <div class="basic-info">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我方主体:</span>
          <el-input
            class="my_style"
            v-model="$route.query.item.bindUnit"
            readonly
          />
        </div>
        <div class="basic-info">
          <span>乙方供应商:</span>
          <el-input class="my_style" readonly v-model="supInfo.supName" />
        </div>
        <div class="basic-info">
          <span>乙方供应商地址:</span>
          <el-input class="my_style" readonly v-model="supInfo.unitRegAdd" />
        </div>
        <div class="basic-info">
          <span>乙方联系人:</span>
          <el-input class="my_style" readonly v-model="supInfo.legPerson" />
        </div>
        <div class="basic-info">
          <span>&nbsp;&nbsp;乙方联系方式:</span>
          <el-input class="my_style" readonly v-model="supInfo.unitRegPhone" />
        </div>

        <div class="basic-info">
          <span>乙方开户行:</span>
          <el-input class="my_style" readonly v-model="supInfo.bank" />
        </div>
        <div class="basic-info">
          <span>乙方开户行账号:</span>
          <el-input class="my_style" readonly v-model="supInfo.bankAdd" />
        </div>
        <div class="basic-info">
          <span>&nbsp;&nbsp;合同金额:</span>
          <el-input class="my_style" v-model="contract.totalMoney" />
        </div>
        <div class="basic-info">
          <span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;币别:</span
          >
          <el-input class="my_style" value="人民币" readonly />
        </div>
        <div class="basic-info">
          <span>已支付金额:</span>
          <el-input class="my_style" v-model="totalMoney" readonly />
        </div>
        <div class="basic-info">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;剩余金额:</span>
          <el-input class="my_style" v-model="endMoney" readonly />
        </div>
        <div class="basic-info">
          <span>&nbsp;&nbsp;合同附件:</span>
          <Div style="position: relative">
            <div
              style="width: 350px; position: absolute; left: 100px; top: -20px"
            >
              <fileUpload
                :syncedMessage.sync="contractFile"
                ref="childrenFile"
              ></fileUpload>
            </div>
          </Div>
          <div style="width: 1200px">
            <el-button
              type="primary"
              style="margin-left: 920px; margin-top: 60px; clear: both"
              @click="submitContract"
              >提 交</el-button
            >
            <el-button type="info" @click="delAgreeList">取 消</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加或修改合同约定对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="款项类型" prop="paymentType">
          <el-select
            v-model="form.paymentType"
            placeholder="请选择款项类型"
            @change="changePaymentMethod"
          >
            <el-option
              v-for="dict in dict.type.bs_payment_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款日期" prop="paymentTime">
          <el-date-picker
            clearable
            v-model="form.paymentTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择付款日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="付款单位" prop="paymentUnit">
          <el-input
            v-model="form.paymentUnit"
            placeholder="请输入付款单位"
            readonly
          />
        </el-form-item>
        <el-form-item label="付款方式" prop="paymentMethod">
          <el-select v-model="form.paymentMethod" placeholder="请选择付款方式">
            <el-option
              v-for="dict in dict.type.bs_payment_method"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款金额" prop="paymentMoney">
          <el-input
            v-model="form.paymentMoney"
            placeholder="请输入付款金额"
            @input="handleInput"
          />
        </el-form-item>

        <el-form-item label="收款单位" prop="supName">
          <el-input
            v-model="form.supName"
            placeholder="请输入收款单位"
            readonly
          />
        </el-form-item>

        <el-form-item label="违约责任" prop="backOut">
          <el-input v-model="form.backOut" placeholder="请输入违约责任" />
        </el-form-item>
        <el-form-item label="付款凭证" prop="paymentFileName">
          <imageUpload
            :cardMessage.sync="fileInfo"
            ref="children"
          ></imageUpload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  listAgree,
  getAgree,
  delAgree,
  addAgree,
  updateAgree,
} from "@/api/basic/agree";
import { getPlanInfoListByBindCode } from "@/api/purs/planInfo";
import { getPurCode, deleteFile, addPurs } from "@/api/purs/purs";
import { selectSupBySupCode } from "@/api/basic/supplier";
import {
  listContract,
  getContract,
  delContract,
  addContract,
  updateContract,
} from "@/api/basic/contract";
import { updateBind } from "@/api/purs/bind";
import { listCdd, getCdd, delCdd, addCdd, updateCdd } from "@/api/purs/cdd";
export default {
  dicts: [
    "bs_payment_method",
    "bs_payment_type",
    "pur_methods",
    "pur_bind_status",
    "business_type",
    "bs_contract_type",
  ],

  data() {
    return {
      contractFile: {
        id: 1,
      },
      bindCode: "",
      planInfoList: [],
      planInfoTotal: 0,
      fileInfo: {
        code: 1,
      },
      planInfoqueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 合同约定表格数据
      agreeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      totalMoney: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contractCode: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        paymentType: [
          { required: true, message: "款项类型不能为空", trigger: "change" },
        ],
        paymentTime: [
          { required: true, message: "付款日期不能为空", trigger: "blur" },
        ],
        paymentUnit: [
          { required: true, message: "付款单位不能为空", trigger: "blur" },
        ],
        supCode: [
          { required: true, message: "供应商编号不能为空", trigger: "blur" },
        ],
        supName: [
          { required: true, message: "收款单位不能为空", trigger: "blur" },
        ],
        paymentMethod: [
          { required: true, message: "付款方式不能为空", trigger: "change" },
        ],
        paymentMoney: [
          { required: true, message: "付款金额不能为空", trigger: "blur" },
        ],
        backOut: [
          { required: true, message: "违约责任不能为空", trigger: "blur" },
        ],
        contractCode: [
          { required: true, message: "合同编号不能为空", trigger: "blur" },
        ],
      },
      contract: {},
      //中标供应商
      cddSupItem: {},
      fileList: [],
      openCode: 0,
      supInfo: {},
      endMoney: 0,
      msgCode: 0,
      money: 0,
      contractCode: "",
    };
  },
  watch: {
    totalMoney: {
      handler(value) {
        this.endMoney = parseFloat(this.contract.totalMoney - value).toFixed(2);
      },
    },

    fileInfo: {
      handler(value) {
        if (value.code == 1) {
          this.form.paymentFilePath = value.filePath;
          this.form.paymentFileName = value.fileName;
          if (this.uploadFlag) {
            //删除文件
            setTimeout(() => {
              deleteFile(this.form.paymentFileName).then();
            }, 2000);
          }
        } else {
          this.form.paymentFilePath = 0;
          this.form.paymentFileName = 0;

          deleteFile(this.form.paymentFileName).then();
        }
      },
    },
    contractFile: {
      handler(value) {
        if (value.code == 1) {
          this.contract.filePath = value.filePath;
          this.contract.fileName = value.fileName;
        } else if (value.code == 2) {
          //删除文件
          this.contract.filePath = 0;
          this.contract.fileName = 0;
          deleteFile(this.contract.fileName).then();
        } else {
          //删除文件
          this.contract.filePath = 0;
          this.contract.fileName = 0;
          deleteFile(this.contract.fileName).then();
        }
      },
    },
  },
  created() {
    this.bindCode = this.$route.query.item.bindCode;

    this.getCode();
  },
  mounted() {
    this.getPlanInfoList();
    this.getCddSup();
    setTimeout(() => {
      this.agreeList.forEach((item) => {
        this.totalMoney = (
          parseFloat(this.totalMoney) + parseFloat(item.paymentMoney)
        ).toFixed(2);
      });

      this.contract.paidMoney = parseFloat(this.totalMoney).toFixed(2);
    }, 800);
    this.supplierInit();
    this.contract.contractType = "1";
  },
  methods: {
    delAgreeList() {
      if (this.agreeList.length > 0) {
        this.agreeList.forEach((item) => {
          delAgree(item.agreeId);
        });
      }

      this.$router.back();
    },

    handleInput(value) {
      let total = parseFloat(value).toFixed(2);
      let syMoney = parseFloat(this.endMoney).toFixed(2);
      if (this.msgCode == 1) {
        if (total - syMoney > 0) {
          this.form.paymentMoney = "";
          this.$modal.msgError("超出合同总金额.请重新输入");
        }
      } else {
        let test = parseFloat(syMoney) + parseFloat(this.money);
        if (total - test > 0) {
          this.form.paymentMoney = "";
          this.$modal.msgError("超出合同总金额.请重新输入");
        }
      }
    },

    //提交
    submitContract() {
      if (
        this.contract.contractName == null ||
        this.contract.privacy == null ||
        this.contract.payTime == null ||
        this.contract.remark == null
      ) {
        this.$modal.msgError("信息填充不完整");
      } else if (
        this.contract.filePath == 0 ||
        this.contract.filePath == null
      ) {
        this.$modal.msgError("请上传电子合同");
      } else {
        this.contract.bindCode = this.bindCode;
        this.contract.contractStatu = 1;
        console.log("form:" + JSON.stringify(this.contract));
        addContract(this.contract).then((res) => {
          if (res.code == 200) {
            let bind = {
              bindCode: this.bindCode,
              status: 7,
            };

            updateBind(bind).then();
            this.$router.back();
          }
        });
      }
    },

    supplierInit() {
      setTimeout(() => {
        selectSupBySupCode(this.cddSupItem.supCode).then((res) => {
          this.supInfo = res.data;
        });
      }, 800);
    },

    changePaymentMethod(value) {
      if (value == 1) {
        if (this.agreeList.length > 0) {
          this.form.paymentType = "2";
          this.form.paymentMoney = this.contract.totalMoney - this.totalMoney;
        } else {
          this.form.paymentMoney = "";
        }
      } else if (value == 2) {
        if (this.agreeList.length == 0) {
          this.form.paymentType = "1";
          this.form.paymentMoney = "";
        }else{
          this.form.paymentMoney = this.contract.totalMoney - this.totalMoney;
        }
      } else if (value == 3) {
        if (this.agreeList.length > 0) {
          this.form.paymentType = "2";
          this.form.paymentMoney = this.contract.totalMoney - this.totalMoney;
        } else {
          this.form.paymentType = "3";
          this.form.paymentMoney = this.contract.totalMoney;
        }
      }
    },

    //获取中标供应商
    getCddSup() {
      listCdd({
        bindCode: this.$route.query.item.bindCode,
        winningBid: 2,
      }).then((res) => {
        this.contract.totalMoney = res.rows[0].finalQuote;
        this.cddSupItem = res.rows[0];
        this.endMoney = this.contract.totalMoney;
      });
    },

    //获取合同编号
    getCode() {
      let tableName = "bs_contract";
      getPurCode(tableName).then((response) => {
        this.contractCode = response.data.encodeNow;
        this.contract.contractCode = response.data.encodeNow;
      });
    },

    getPlanInfoList() {
      getPlanInfoListByBindCode(this.bindCode).then((res) => {
        this.planInfoTotal = res.total;
        this.planInfoList = res.rows;
      });
    },

    /** 查询合同约定列表 */
    getList() {
      setTimeout(() => {
        this.loading = true;

        this.queryParams.bindCode = this.bindCode;
        listAgree(this.queryParams).then((response) => {
          console.log(JSON.stringify(response))
          this.agreeList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }, 800);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        agreeId: null,
        paymentType: null,
        paymentTime: null,
        paymentUnit: null,
        supCode: null,
        supName: null,
        paymentMethod: null,
        paymentMoney: null,
        backOut: null,
        contractCode: null,
        paymentFilePath: null,
        paymentFileName: null,
        createTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.agreeId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.msgCode = 1;
      this.reset();
      if (this.openCode == 1) {
        this.fileList = [];
        this.$refs.children.setFileList(this.fileList);
      }

      this.form.paymentUnit = this.$route.query.item.bindUnit;
      this.form.contractCode = this.contract.contractCode;
      this.form.supCode = this.cddSupItem.supCode;
      this.form.supName = this.cddSupItem.supName;
      this.open = true;
      this.title = "添加合同约定";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.money = row.paymentMoney;
      this.msgCode = 2;
      this.openCode = 1;
      this.reset();
      const agreeId = row.agreeId || this.ids;
      getAgree(agreeId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改合同约定";
        this.fileList = [];
        console.log(this.form.paymentFileName != 0);

        if (this.form.paymentFileName != 0 || this.form.paymentFilePath != 0) {
          let obj = {};
          obj.url = response.data.paymentFilePath;
          obj.name = response.data.paymentFileName;
          obj.code = 3;
          this.fileList.push(obj);
        }
        setTimeout(() => {
          this.$refs.children.setFileList(this.fileList);
        }, 1000);
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.agreeId != null) {
            this.form.paymentMoney = parseFloat(this.form.paymentMoney).toFixed(
              2
            );
            updateAgree(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.totalMoney = 0;
              setTimeout(() => {
                this.agreeList.forEach((item) => {
                  this.totalMoney = (
                    parseFloat(this.totalMoney) + parseFloat(item.paymentMoney)
                  ).toFixed(2);
                });

                this.contract.paidMoney = this.totalMoney;
              }, 2000);
              this.open = false;
              this.getList();
            });
          } else {
            if (
              this.form.paymentFileName == 0 ||
              this.form.paymentFilePath == 0 ||
              this.form.paymentFileName == null ||
              this.form.paymentFilePath == null
            ) {
              this.$modal.msgError("请上传付款凭证");
            } else {
              this.form.bindCode = this.bindCode;
              addAgree(this.form).then((response) => {
                if (response.code == 200) {
                  this.$modal.msgSuccess("新增成功");
                  setTimeout(() => {
                    this.agreeList.forEach((item) => {
                      this.totalMoney = (
                        parseFloat(this.totalMoney) +
                        parseFloat(item.paymentMoney)
                      ).toFixed(2);
                    });

                    this.contract.paidMoney = this.totalMoney;
                  }, 2000);
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const agreeIds = row.agreeId || this.ids;
      this.$modal
        .confirm('是否确认删除合同约定编号为"' + agreeIds + '"的数据项？')
        .then(function () {
          return delAgree(agreeIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
          if (row.paymentFileName != 0) {
            deleteFile(row.paymentFileName).then();
          }

          this.totalMoney = 0;
          setTimeout(() => {
            this.agreeList.forEach((item) => {
              this.totalMoney = (
                parseFloat(this.totalMoney) + parseFloat(item.paymentMoney)
              ).toFixed(2);
            });
            this.contract.paidMoney = this.totalMoney;
          }, 1500);
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "basic/agree/export",
        {
          ...this.queryParams,
        },
        `agree_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
  
  <style scope>
.contract-title {
  width: 1200px;
  height: 120px;
  border: 1px solid red;
  margin: 0 auto;
}

.add-contract-box {
  width: 100%;
  overflow: auto;
  background-color: #f1f4f8;
  position: relative;
}

.contract-head {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #ccc;
  line-height: 60px;
  font-family: "宋体";
  font-weight: bold;
  font-style: italic;
  text-indent: 68px;
  background-image: url("../../../image/我的计划.png");
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 30px center;
}

.box-contract {
  width: 1300px;
  height: 700px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  margin: 20px auto;
  border-radius: 18px;
}

.box-contract > div:nth-of-type(1) {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-indent: 20px;
  font-weight: bold;
  color: black;
}

.box-contract-info {
  width: 1300px;
  height: 450px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  margin: 20px auto;
  border-radius: 18px;
}

.box-product-info {
  width: 1300px;
  overflow: auto;
  border: 1px solid #ccc;
  background-color: #ffffff;
  margin: 20px auto;
  border-radius: 18px;
}

.box-product-info > div:nth-of-type(1) {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-indent: 20px;
  font-weight: bold;
  color: black;
}

.box-contract-info {
  width: 1300px;
  overflow: auto;
  border: 1px solid #ccc;
  background-color: #ffffff;
  margin: 20px auto;
  border-radius: 18px;
}
.box-contract-info > div:nth-of-type(1) {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-indent: 20px;
  font-weight: bold;
  color: black;
}

.box-bind-info {
  width: 1300px;
  height: 220px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  margin: 20px auto;
  border-radius: 18px;
}

.box-bind-info > div:nth-of-type(1) {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-indent: 20px;
  font-weight: bold;
  color: black;
}

.box-contract-info > div:nth-of-type(1) {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-indent: 20px;
  font-weight: bold;
  color: black;
}

.basic-info {
  width: 400px;
  height: 40px;
  margin: 20px 100px;
  float: left;
}

.time-box {
  width: 400px;
  height: 40px;
  margin: 20px 100px;
  float: left;
}

.time-box > span {
  font-family: "仿宋";
  font-weight: bold;
}

.basic-info > span {
  font-family: "仿宋";
  font-weight: bold;
}

.my_style {
  width: 200px;
  margin-left: 20px;
  border-bottom: 1px solid gray;
}

.basic-info .el-input input {
  border: none;
  outline: none;
  box-shadow: none;
  font-weight: bold;
  font-family: "仿宋";
  font-size: 15px;
}

.test {
  border: 1px;
  outline: 1px;
  box-shadow: 1px;
}

.textarea-sty {
  width: 800px;
  position: absolute;
  left: 206px;
  border: none;
  outline: none;
  box-shadow: none;
  border: 1px solid black;
  border-radius: 5px;
}

.total-number {
  margin-left: 50px;
  font-family: "仿宋";
  font-style: italic;
  font-weight: bold;
}
</style>